<template>
  <div class="wrap">
    <div class="searchBar">
      <van-icon name="arrow-left" size="22" @click="$router.go(-1)"/>
      <van-search v-model="keyword" placeholder="请输入搜索关键词" />
      <van-button type="primary" round size="small" @click="searchBtn">搜索</van-button>
    </div>
    <div class="hot-search-wrap">
      <div class="hot-search-title">热门搜索</div>
      <ul class="hot-search">
        <li>红玫瑰</li>
        <li>蛋糕</li>
        <li>百合</li>
        <li>康乃馨</li>
      </ul>
    </div>
    <div class="history">
      <div class="history-title">历史搜索</div>
      <ul class="history-content">
        <li v-for="his in histories" :key="his" @click="toHis(his)">{{ his }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: '',
      histories: localStorage.getItem('his') ? JSON.parse(localStorage.getItem('his')) : []
    }
  },
  methods: {
    toHis (word) {
      this.keyword = word
      this.searchBtn()
    },
    searchBtn () {
      // 先取histories里面的数据，再存进去
      let his = localStorage.getItem('his') ? JSON.parse(localStorage.getItem('his')) : []
      his.unshift(this.keyword)
      his = [...new Set(his)]
      if (his.length >= 10) {
        his.length = 10
      }
      localStorage.setItem('his', JSON.stringify(his))
      // 点击搜索跳转到搜索结果页 传keyword
      this.$router.push({
        path: '/searchResults',
        query: {
          keyword: this.keyword
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  .searchBar {
    display: flex;
    align-items: center;
    background-color: #fff;
    .van-button--small {
      padding: 0 20px;
      font-size: 14px;
      font-weight: bold;
    }
    .van-icon-arrow-left {
      padding-left: 10px;
    }
    .van-search {
      flex: 1;
    }
  }
   .hot-search-wrap{
      background-color: #fff;
    .hot-search-title{
      font-size: 14px;
      font-weight: bold;
      padding: 20px 0 20px 10px;
      color: pink;
    }
    .hot-search{
      display: flex;
      flex-wrap: wrap;
      >li{
        margin: 8px;
        padding: 5px 10px;
        background-color: #f1f1f1;
      }
    }
  }
  .history {
    background-color: #fff;
      .history-title {
        font-size: 14px;
        font-weight: bold;
        padding: 20px 0 20px 10px;
        color: pink;
      }
      .history-content {
        display: flex;
        flex-wrap: wrap;
      > li {
        margin: 8px;
        padding: 5px 10px;
        background-color: #f1f1f1;
      }
    }
  }
}
</style>
